<template>
	<view class="container">
		<view class="group">
			<text class="title">系统信息</text>
			<text class="content">负责人:{{data.staffName}}</text>
			<text class="content">线索来源:{{buildChannel(data)}}</text>
			<text v-if="type === 0" class="content">客户分类:{{buildType(data)}}</text>
		</view>

		<view class="group">
			<text class="title">基本信息</text>
			<view class="row">
				<text class="left">孩子姓名:{{data.childName}}</text>
				<text class="left">出生年月:{{formateDate(data.birthday)}}</text>
			</view>
			<view class="row">
				<text class="left">昵称:{{data.nickName || ''}}</text>
				<text class="left">英文名:{{data.englishName || ''}}</text>
			</view>
			<view class="row">
				<text class="left">性别:{{data.gender === 0 ? '女' : '男'}}</text>
				<text class="left">血型:{{data.bloodType || ''}}</text>
			</view>
			<view class="row">
				<text class="left">国籍:{{data.nationality || ''}}</text>
				<text class="left">目标园所:{{data.targetGarden || ''}}</text>
			</view>
			<view class="row">
				<text class="left">户口所在地:{{data.registerResidence || ''}}</text>
				<text class="left">儿童户籍类型:{{data.registerType || ''}}</text>
			</view>
			<view class="row">
				<text class="left">孩子所处语言环境:{{data.languageEnvironment || ''}}</text>
				<text class="left"></text>
			</view>
		</view>

		<view class="group">
			<text class="title">家长信息</text>
			<view class="row">
				<text class="left">家长姓名:{{data.name || ''}}</text>
				<text class="left">与宝宝关系:{{data.relationship || ''}}</text>
			</view>
			<view class="row">
				<text class="left phone" @click="callPhone(data.mobile)">联系电话:{{data.mobile}}</text>
				<text class="left">学历:{{data.degree || ''}}</text>
			</view>
			<text class="content">家庭住址:{{data.homeAddress || ''}}</text>
			<text class="content">工作单位:{{data.company || ''}}</text>
			<text class="content">职称:{{data.duty || ''}}</text>
		</view>
		
		<u-button @click="show = true">转成客户</u-button>
		
		<lead-to-clientele :visible.sync="show" :item="data" @success="success"></lead-to-clientele>
	</view>
</template>

<script>
	import {
		getLeadsDetailWithClientele,
		getClienteleDetail,
		getAllChannel
	} from '@/api/clientele.js'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import LeadToClientele from './components/lead-to-clientele.vue'
	export default {
		name: "ClienteleInfoView",
		components: {
			LeadToClientele
		},
		props: {
			type: {
				type: String,
				default () {
					return '0'
				}
			},
			clientelesId: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				data: {},
				channelList: [],
				
				show: false
			}
		},
		created() {
			this.getLeadDetail();
		},
		methods: {
			async getLeadDetail() {
				const areaId = this.$store.state.user.tchInfo.area.id;
				const data = await getAllChannel(areaId);
				this.channelList = data.data;
				if (this.type === '1') {
					getLeadsDetailWithClientele(this.clientelesId).then(res => {
						console.log(res);
						this.data = res.data.leads;
					})
				} else if (this.type === '0') {
					getClienteleDetail(this.clientelesId).then(res => {
						console.log(res);
						this.data = res.data;
					})
				}
			},
			
			callPhone(phoneNumber) {
				uni.makePhoneCall({
				    phoneNumber: phoneNumber //仅为示例
				});
			},
			
			buildChannel(data){
			    if (this.channelList==null){
			      return data.channel;
			    }
			    for (var index in this.channelList){
					let item = this.channelList[index];
			      if (item.id===data.channelId){
			        return item.name;
			      }
			    }
			    return data.channel;
			  },
			
			buildType(data) {
				if (data.clienteleType === 'A') {
					return '有支付能力也有消费意愿';
				} else if (data.clienteleType === 'B') {
					return '有支付能力消费意愿一般';
				} else if (data.clienteleType === 'C') {
					return '有能力支付受限消费意愿强烈';
				} else {
					return '无支付能力';
				}
			},
			
			formateDate(time) {
				return formatDateByTimestamp(time, 'yyyy-mm-dd');
			},
			
			success() {
				this.$emit('success')
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 40rpx;

		.group {
			display: flex;
			flex-direction: column;
			margin-bottom: 60rpx;
			color: $app-font-color;
			font-size: 28rpx;
			
			.title {
				color: $app-font-color;
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.content {
				margin-bottom: 10rpx;
			}
			
			.row{
				display: flex;
				flex-direction: row;
				margin-bottom: 10rpx;
				
				.left{
					flex-grow: 1;
					width: 0rpx;
				}
				
				.phone{
					text-decoration: underline;
				}
			}
		}
	}
</style>
